import React,{useState,useEffect} from 'react'
/*  
    1、Effect Hook的作用：完成副作用
    1）手动修改DOM
    2、Effect Hook的基本使用
    1)导入useState
    2)使用useEffect
    3、useEffect的语法
    useEffect(参数1,参数2)
    参数1：回调函数
    参数2：数组，这个可以省略的，也可以不省略，省略和不省略的作用一点不一样
    4、关于useEffect第2个参数的说明
    1)、如果没有第2个参数：它就相当于执行类组组件生命周期中的componentDidUpodate()和componentDidMount()
    2)、如果第2个参数是一个空数组，它就只执行componentDidMount()
    5、useEffect第一个参数的返回值是一个函数，这个函数模拟类组件生命周期中componentWillUnMount这个方法
*/
export default function TitleCounter() {
    const [count,setCount]=useState(0)
    const [age,setAge]=useState(38)
    //useEffect如果没有第2个参数，它的作用就相当于之前的componentDidUpodate()和componentDidMount()这个两个函数的作用
    //componentDidMount：当组件被挂载的时候会执行一次
    //componentDidUpodate()每次当组件更新的时候会执行一次
    //
    useEffect(()=>{
        console.log('************************');
        document.title=`You clicked ${count}次`
        let timers=setInterval(() => {
            console.log('我被执行了.....');
        }, 1000);
        //useEffect第一个参数的返回值
        return ()=>{
            clearInterval(timers)
        }
    },[age])
  return (
    <div>
        <div>You clicked {count}次</div>
        <button onClick={()=>{
            setCount(count+1)
        }}>点击</button>
        <hr />
        <div>年龄:{age}</div>
        <button onClick={()=>{
            setAge(age+1)
        }}>改年龄</button>
    </div>
  )
}
